<template>
	<view class="changepw-container" :style="{ 'background':'#f5f7fa'}">
		<shopro-navbar :isBack="true" :background="{'background':'#f5f7fa'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">修改密码</text>
		</shopro-navbar>
		<view class="form-wrap">
			<u-form ref="form" :model="form" :rules="rules"  labelPosition="left" labelWidth="80">
				<u-cell-group>
					<u-cell title="当前密码">
						<template #value>
							<u-form-item prop="old_password">
								<u-input v-model="form.old_password" placeholder="请输入当前密码" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<u-cell title="新密码">
						<template #value>
							<u-form-item prop="new_password">
								<u-input v-model="form.new_password" placeholder="请输入新密码" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
					<u-cell title="确认密码">
						<template #value>
							<u-form-item prop="confirm_password">
								<u-input v-model="form.confirm_password" placeholder="请再次输入新密码" clearable border="none" inputAlign="right" :color="'#999'"/>
							</u-form-item>
						</template>
					</u-cell>
				</u-cell-group>
			</u-form>
			<!-- 保存按钮 -->
			<view class="save-btn-wrap">
				<view class="save-btn u-flex u-flex-center u-flex-items-center" @click="!canSubmit?'' :onSubmit" >保存修改</view>
			</view>
		
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				old_password: '',
				new_password: '',
				confirm_password: '',
			},
			rules: {
				old_password: [
					{ required: true, message: '请输入当前密码', trigger: 'blur' },
				],
				new_password: [
					{ required: true, message: '请输入新密码', trigger: 'blur' },
					{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
				],
				confirm_password: [
					{ required: true, message: '请再次输入新密码', trigger: 'blur' },
					{ validator: (rule, value, callback) => {
						if (value !== this.form.newPassword) {
							callback(new Error('两次输入的密码不一致'));
						} else {
							callback();
						}
					}, trigger: 'blur' },
				],
			},
		};
	},
	computed: {
		canSubmit() {
			return (
				this.form.old_password &&
				this.form.new_password &&
				this.form.confirm_password &&
				this.form.new_password.length >= 6 &&
				this.form.new_password === this.form.confirm_password
			);
		},
	},
	methods: {
		onSubmit() {
			this.$refs.form.validate(async(valid) => {
				if (valid) {
					const res = await record.changePassword(this.form).then((res) => {
						if (res.response.data.code == 1) {
							this.$refs.uToast.show({
								title: '修改成功!',
								type: 'success',
							});
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '请检查输入项',
						type: 'error',
					});
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.changepw-container {
	min-height: 100vh;
	background: #f7f7f7;
}
.form-wrap {
	margin: 20rpx;
}
::v-deep .u-cell{
	margin-top: 20rpx;
	border-bottom: 0;
	background: #fff;
	border-radius: 12rpx;
}
::v-deep .u-line{
	display: none!important;
}
::v-deep .u-form-item__body{
	padding: 0!important;
}
.save-btn-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24rpx;
	padding: 0 32rpx;
	z-index: 10;
	.save-btn{
		width: 95%;
		margin: 0 auto;
		height: 80rpx;
		border-radius: 34rpx;
		background: #1664FF;
		box-shadow: 0px 2px 4px 0px rgba(22,100,255,0.5);
		color: #fff;
	}
}
</style>
